<!--气泡图-->

<template>
  <div class="w-h-full">
    <!--组件遮罩层，用于在设计器中显示-->
    <div v-if="shade" class="shade"></div>

    <div v-resize="resizeHandle" style="width: 100%; height: 100%;">
      <div :id="'chart-'+component.id+'-'+chartDomNum" class="w-h-full"></div>
    </div>
  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import ChartCompMixin from '@/mixin/ChartCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  import BubbleChart from './BubbleChart'

  const _this = {
    name: 'BubbleChart', // 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompMixin, ChartCompMixin],
    attr: {
      version: '2.1',
      configDataTemp: Object.assign({

        // 组件相关配置属性，Echarts图表组件的相关配置属性，必须在chartOption对象下定义
        chartOption: {
          global: {
            itemDraggable: true, // 气泡项是否可拖拽
            force: {
              repulsion: 100
            },
            symbol: 'circle',
            label: {
              show: true,
              color: '#fff',
              fontSize: 12,
              shadowBlur: 0,
              shadowColor: ''
            }
          },
          title: PnDesigner.buildTitleConfigData(),
          visualMap: {
            min: 1,
            max: 10000,
            inRange: {
              symbolSize: [30, 100]
            }
          },

          series: [
            BubbleChart.buildSeriesObj('#2196f3'),
            BubbleChart.buildSeriesObj('#673ab7'),
            BubbleChart.buildSeriesObj('#009688'),
            BubbleChart.buildSeriesObj('#ff9800'),
            BubbleChart.buildSeriesObj('#ffeb3b'),
            BubbleChart.buildSeriesObj('#ff5722'),
          ]
        }

      }, PnDesigner.buildFuncCompDatasourceField({ // 如果组件需要配置数据源，则需要调用此函数构建数据源字段对象
        ds_resultObjTemplate: [
          {
            field: 'name',
            remark: '类目'
          },
          {
            field: 'value',
            remark: '值'
          }
        ],
        ds_resultObj: [
          {
            "name": "考研",
            "value": 10000
          },
          {
            "name": "兼职",
            "value": 8000
          },
          {
            "name": "食堂",
            "value": 4386
          },
          {
            "name": "家教",
            "value": 4055
          },
          {
            "name": "大四",
            "value": 2467
          },
          {
            "name": "研友",
            "value": 2244
          }
        ],
        ds_useFilter: true, // 是否使用过滤器，默认不使用
        ds_useTimer: true, // 是否开启定时器配置，默认不开启
      }), PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildEchartCompCustomOption(), PnDesigner.buildFuncCompInteractionConfiguration([
          PnDesigner.buildFuncCompInteractionStreamItem('itemClick', [
            PnDesigner.buildFuncCompInteractionFieldsMapItem('name', '', '类目'),
            PnDesigner.buildFuncCompInteractionFieldsMapItem('value', '', '值')
          ])
      ]))
    },
    data() {
      return {}
    },
    mounted() {
      this.init();

      this.setTimer(() => { //定时器，如果当前组件不使用定时器，可以将此段代码删除
        this.init()
      })
    },
    methods: {
      init() { // 组价初始化函数，函数名必须使用init，不可更改
        this.initDatasource(() => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runDataItemClickJsCode(this.launchInteractionStream)
        }, (result) => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runDataItemClickJsCode(this.launchInteractionStream)
        });
      },

      launchInteractionStream (params) {
        this.$PnDesigner.launchInteractionStream(this.component.compConfigData, 'itemClick', params.data)
      }
    },
    computed: {
      chartOption() {

        let option = {
          title: PnDesigner.buildTitleChartOption(this.component.compConfigData.chartOption.title),
          tooltip: {
            trigger: 'item'
          },
          visualMap: {
            show: false,
            min: this.component.compConfigData.chartOption.visualMap.min,
            max: this.component.compConfigData.chartOption.visualMap.max,
            inRange: {
              symbolSize: [
                this.component.compConfigData.chartOption.visualMap.inRange.symbolSize[0],
                this.component.compConfigData.chartOption.visualMap.inRange.symbolSize[1]
              ]
            }
          },
          series: [
            {
              type: 'graph',
              layout: 'force',
              force: {
                repulsion: this.component.compConfigData.chartOption.global.force.repulsion
              },
              label: {
                show: this.component.compConfigData.chartOption.global.label.show,
                color: this.component.compConfigData.chartOption.global.label.color,
                fontSize: this.component.compConfigData.chartOption.global.label.fontSize
              },
              data: []
            }
          ]
        };

        this.runCustomFilter(this.component.compConfigData.ds_resultObj).forEach((item, index) => {

          let seriesItem = Object.assign({
            draggable: this.component.compConfigData.chartOption.global.itemDraggable,
          }, item)

          if (this.component.compConfigData.chartOption.series[index]) {
            let seriesItemSetting = this.component.compConfigData.chartOption.series[index];
            seriesItem.symbol = seriesItemSetting.symbolImage ?
              'image://' + window.g.AXIOS_BASE_URL + seriesItemSetting.symbolImage : this.component.compConfigData.chartOption.global.symbol;

            seriesItem.itemStyle = {
              color: seriesItemSetting.itemStyle.color,
              borderWidth: seriesItemSetting.itemStyle.borderWidth,
              borderColor: seriesItemSetting.itemStyle.borderColor,
              shadowBlur: seriesItemSetting.itemStyle.shadowBlur,
              shadowColor: seriesItemSetting.itemStyle.shadowColor
            }
          }

          option.series[0].data.push(seriesItem)
        });

        // 下面这一段代码用于合并组件的扩展配置，如果组件不需要扩展配置，可以删掉
        option = this.$PnDesigner.mergeChartCustomOption(option, this.component.compConfigData.customOption);

        return option;
      }
    }
  };

  export default _this
</script>

<style scoped>

</style>
